<template>
  <div>
    <el-row>
      <div style="margin-bottom: 10px">
        <el-input v-model.trim="code" placeholder="输入设备编号进行搜索" style="width: 80%"></el-input>
        <el-button type="primary" style="width: 20%" @click="onSubmit" size="medium">查询</el-button>
      </div>
    </el-row>
    <div v-loading.fullscreen.lock="fullscreenLoading">
      <el-tabs v-model="type" @tab-click="handleClick()" :stretch="true">
        <el-tab-pane label="未提交" name="0" lazy>
          <div v-if="typeId == 1">
            <div v-if="notSubmittedList.length>0" v-for="item in notSubmittedList" :key="item.point_type_id"
                 style="padding: 10px 0 10px 0;box-shadow: 1px 1px 10px 1px #eee;;margin: 10px 0 10px 0">
              <el-row>
                <el-col :span="18" style="padding-left: 10px">{{ item.name }}</el-col>
                <el-col :span="6" style="text-align: right;padding-right: 10px">{{ item.no_install_count }}个</el-col>
              </el-row>
            </div>
            <div v-if="notSubmittedList.length==0" style="text-align: center">暂无数据</div>
          </div>
          <div v-if="typeId != 1">
            <template v-if="deviceList.length>0">
              <div ref="scroll0" class="scroll-list"
                   style="white-space:nowrap;flex:1;overflow:hidden;display:flex;flex-flow:column;height: calc(100vh - 40px);">
                <div class="scroll-content">
                  <div class="card_test" v-for="item in deviceList" :key="item.id"
                       style="padding-top: 10px;padding-bottom: 10px;padding-left: 5px;padding-right: 5px">
                    <div style="display: flex;">
                      <el-col :span="18">
                        <span>{{ item.typeName }}</span>
                      </el-col>
                      <el-col :span="6" style="text-align: right">
                        <el-tag type="danger" size="mini">未提交</el-tag>
                      </el-col>
                    </div>
                    <div style="margin: 10px 0px 0px 0px;display: flex">编号：{{ item.code }}</div>
                    <div style="margin: 10px 0px 0px 0px;display: flex">详情：{{ item.detail }}</div>
                    <div class="flex align-center justify-around margin-top">
                      <el-button size="mini" type="success" round style="width: 100px;" @click="toSubmitByDevice(item.id)" v-if="item.show_submit">提交</el-button>
                      <el-button size="mini" type="primary" round style="width: 100px;" @click="toReplaceByDevice(item)" v-if="item.show_submit&&typeId==2">调整</el-button>
                    </div>
                  </div>
                  <div v-if="isEnd" class="text-gray text-center">这里到底啦</div>
                </div>
              </div>
            </template>
            <div v-if="deviceList.length==0" style="text-align: center">
              暂无数据
            </div>
          </div>
        </el-tab-pane>
        <el-tab-pane label="已提交" name="1" lazy>
          <template v-if="deviceList.length>0">
            <div ref="scroll1" class="scroll-list"
                 style="white-space:nowrap;flex:1;overflow:hidden;display:flex;flex-flow:column;height: calc(100vh - 40px);">
              <div class="scroll-content">
                <div class="card_test" v-for="item in deviceList" :key="item.id"
                     style="padding-top: 10px;padding-bottom: 10px;padding-left: 5px;padding-right: 5px">
                  <div style="display: flex;">
                    <el-col :span="18">
                      <span>{{ item.typeName }}</span>
                    </el-col>
                    <el-col :span="6" style="text-align: right">
                      <el-tag type="success" size="mini">已提交</el-tag>
                    </el-col>
                  </div>
                  <div style="margin: 10px 0px 0px 0px;display: flex">编号：{{ item.code ? item.code : '待审批，暂无信息' }}</div>
                  <div style="margin: 10px 0px 0px 0px;display: flex">详情：{{
                      item.detail ? item.detail : '待审批，暂无信息'
                    }}
                  </div>
                  <div style="margin: 10px 0px 0px 0px;display: flex">提交时间：{{ item.created_at }}</div>
                  <div class="flex align-center justify-start margin-top">
                    <img v-for="url in item.img_list" :key="url" style="width: 100px;margin:5px;height: 100px"
                         :src="url" :preview="item.id" preview-text="预览大图"/>
                  </div>
                  <div class="flex align-center justify-around margin-top">
                    <el-button size="mini" type="primary" round style="width: 100px;" @click="toReplaceInfo(item)"
                               v-if="item.show_edit">替换照片
                    </el-button>
                  </div>
                </div>
                <div v-if="isEnd" class="text-gray text-center">这里到底啦</div>
              </div>
            </div>
          </template>
          <div v-if="deviceList.length==0" style="text-align: center">
            暂无数据
          </div>
        </el-tab-pane>
      </el-tabs>
    </div>

    <el-dialog title="调整" :visible.sync="dialogFormVisible" width="80%">
      <form-device-choose ref="formDeviceChoose" :id="deviceId"></form-device-choose>

      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="toReplacePageByDevice">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import {getOrderDetail, getAuditInfo} from "@/api/app/worker";
import BScroll from "@better-scroll/core";
import Pullup from "@better-scroll/pull-up";
import FormDeviceChoose from './components/form_device_choose'

BScroll.use(Pullup);
export default {
  name: "app_view_workorder_detail",
  data() {
    return {
      deviceList: [],
      type: '0',
      code: null,
      orderId: null,
      typeId: null,
      buildId: null,
      isEnd: false,
      notSubmittedList: [],
      bscroll: null,
      listParams: {
        page: 1,
        page_size: 10
      },
      isPullUpLoad: false,
      fullscreenLoading: false,
      bsOptions: {
        scrollY: true,
        click: true,
        /* pullDownRefresh: {
          threshold: 90,
          stop: 10
        }, */
        pullUpLoad: true,
        bounce: {
          top: true,
          bottom: true
        }
      },

      dialogFormVisible: false,
      deviceId: null,
      settingId: null,
      mediaTypeId: null // 点位类型
    }
  },
  components: {
    FormDeviceChoose
  },
  methods: {
    beforeCreate() {
      document
        .querySelector("body")
        .setAttribute("style", "background-color:#FFFFFF");
    },

    beforeDestroy() {
      document.querySelector("body").removeAttribute("style");
      this.bscroll && this.bscroll.destroy();
    },
    beforeRouteLeave(to, from, next) {
      this.$destroy();
      next();
    },
    activated() {
      document
        .querySelector("body")
        .setAttribute("style", "background-color:#FFFFFF");
    },
    deactivated() {
      document.querySelector("body").removeAttribute("style");
      this.bscroll = null;
    },
    handleClick() {
      this.resetPage();
      this.getList(false);
    },
    resetPage() {
      const that = this;
      that.deviceList = [];
      that.notSubmittedList = [];
      that.isEnd = false;
      that.listParams.page = 1;
      that.listParams.page_size = 10;
      that.bscroll = null;
    },
    onSubmit() {
      this.resetPage();
      this.getList(false);
    },
    getList(add = true) {
      const that = this;
      if (!that.isEnd) {
        this.fullscreenLoading = true;
        const params = Object.assign({
          orderId: this.orderId,
          orderType: this.typeId,
          isSubmitted: this.type == 1,
          building_area_id: this.buildId,
          code: this.code
        }, this.listParams)
        if (this.typeId == 4 && this.type == 0) {
          return getOrderDetail(params).then(
            res => {
              this.fullscreenLoading = false;
              that.notSubmittedList = res.data;
            }
          )
        } else {
          return getOrderDetail(params).then(
            ({
               data: {
                 current,
                 pages,
                 total,
                 records,
                 size
               }
             }) => {
              that.fullscreenLoading = false;
              if (add) {
                that.deviceList = (that.deviceList || []).concat(records || []);
              } else {
                that.deviceList = records || [];
              }
              that.listParams.page++;
              let flag = (total / size) <= current;
              if (flag) {
                that.isEnd = true;
              }
              this.initBScroll();
            })
        }
      }
    },
    initBScroll() {
      const that = this;
      that.$nextTick(() => {
        const $scrollRef = that.$refs['scroll' + that.type];
        if (!$scrollRef) return false;
        $scrollRef.hasVerticalScroll = true;
        if (!that.bscroll) {
          that.bscroll = new BScroll($scrollRef, that.bsOptions);
          that.bscroll.on("pullingUp", () => {
            that.getList().then(() => {
              that.$nextTick(() => {
                that.bscroll.finishPullUp();
                that.bscroll.refresh();
                // this.isPullDownLoad = false;
                that.isPullUpLoad = false;
              });
            });
          });
        } else {
          that.bscroll && that.bscroll.refresh();
        }
      });
    },
    toSubmitByDevice(id){
      this.$confirm('您确认去提交?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        window.Android.jump(id,2)
      }).catch(() => {

      });
    },
    toReplaceByDevice(row){
      this.dialogFormVisible=true
      this.deviceId = row.id
      this.mediaTypeId = row.point_type_id
    },
    toReplacePageByDevice(){
      const that = this,
        child = this.$refs.formDeviceChoose
      child.$refs.cuForm.validate((valid) => {
        if (valid) {
          var formData = child.cuForm
          this.dialogFormVisible=false
          that.$router.push({
            path: '/app/view/app_view_building_device_choose',
            query: {
              startAt: formData.work_order_info.start_at,
              endAt: formData.work_order_info.end_at,
              orderId: formData.work_order_info.work_order_id,
              // settingId: formData.setting_info.setting_id,
              buildId: that.buildId,
              lat: that.buildLat,
              lng: that.buildLng,
              deviceId:that.deviceId,
              mediaTypeId: that.mediaTypeId,
            }
          })
        } else {
          return false;
        }
      });
    },
    toReplaceInfo(item) {
      this.fullscreenLoading = true
      return getAuditInfo({audit_id: item.lightbox_audit_id}).then(
        res => {
          this.fullscreenLoading = false;
          window.Android.jump(JSON.stringify(res.data), 3)
        }
      )
    },
  },
  created() {
    let that = this;
    const query = that.$route.query;
    if (query.id) {
      this.orderId = query.id;
    }
    if (query.type) {
      this.typeId = query.type;
    }
    if (query.buildId) {
      this.buildId = query.buildId;
    }
    if (query.lat) {
      this.buildLat = query.lat;
    }
    if (query.lng) {
      this.buildLng = query.lng;
    }
    this.getList(false).then(
      () => {
        this.initBScroll();
      }
    );
  }
}
</script>

<style scoped type="text/css">
.card_test {
  box-shadow: 1px 1px 10px 1px #eee;
  margin: 10px 5px 10px 5px;
  min-width: 20px;
  min-height: 30px;
}
</style>
<style scoped lang="scss">
.scroll-list {
  padding: 0 10px;

  .scroll-content {
    .card {
      display: flex;
      flex-flow: column;
      padding: 11px;
      background: rgba(255, 255, 255, 1);
      border-radius: 3px;
      min-height: 74px;
      box-sizing: border-box;
      margin: 15px 0;
      box-shadow: 1px 1px 10px 1px #eee;

      .title {
        display: flex;
        justify-content: space-between;
        align-items: center;

        div:nth-child(1) {
          width: 100%;
          white-space: normal;
          font-size: 16px;
          font-family: PingFangSC-Regular;
          font-weight: 400;
          color: rgba(36, 36, 36, 1);
          line-height: 22px;
        }

        div:nth-child(2) {
          height: 17px;
          font-size: 12px;
          font-family: PingFangSC-Regular;
          font-weight: 400;
          color: rgba(134, 134, 134, 1);
          line-height: 17px;
        }
      }

      .tip {
        display: flex;
        justify-content: space-between;
        align-items: center;
        min-height: 18px;
        font-size: 13px;
        font-family: PingFangSC-Regular;
        font-weight: 400;
        color: rgba(88, 88, 88, 1);
        line-height: 18px;
        margin-top: 11px;
      }
    }
  }
}
</style>
